import Taro from '@tarojs/taro';
import { MaterialIcons } from 'taro-icons';
import { Button, View, Text } from '@tarojs/components';

import "./processButton.scss"

interface ProcessButtonProps {
  onClick: () => void;
  content?: string;
  loading?: boolean;
  disabled?: boolean;
  subText?: string;
}


export const CompleteButton = (props: ProcessButtonProps) => {
  return (
    <Button 
        loading={props.loading} 
        disabled={props.disabled} 
        className="continue-button orange" 
        onClick={props.onClick}
        style={{ color: '#fff' }}
        plain={false}
    >
        <MaterialIcons name="done" icon={27} color="#fff"/>
        {props.content || "完 成 操 作"}
    </Button>
)}


export const NextButton = (props: ProcessButtonProps) => {
  return (
    <Button loading={props.loading} disabled={props.disabled} 
    className="continue-button blue" onClick={props.onClick}
    style={{ color: '#fff' }}
    plain={false}
    >
        <MaterialIcons name="done-all" icon={27} color="#fff" />
        {props.content || '已完成，开启下一个流程'}
    </Button>
)}

export const PassButton = (props: ProcessButtonProps) => {
  return (
    <Button 
      type="warn"
      loading={props.loading}
      disabled={props.loading || props.disabled}
      onClick={props.onClick}
      className="continue-submit-button"
    >
      <View className="continue-submit-text">
        <Text>{props.subText}</Text>
      <Text className='continue-submit-content'>{props.content}</Text>
    </View>
  </Button>
)}